import { cn } from "@/lib/utils";

export default function ThreeLayersSkel({
  className = "",
  slot1,
  slot2,
  slot3,
}: {
  className?: string;
  slot1?: React.ReactNode;
  slot2?: React.ReactNode;
  slot3?: React.ReactNode;
}) {
  // rounded-md bg-muted
  return (
    <div
      className={cn(
        "flex h-full w-full flex-col space-y-2 overflow-hidden rounded-lg bg-white shadow",
        className,
      )}
    >
      <div className="mx-4 mt-2 flex h-auto w-auto rounded-md bg-transparent">
        {slot1}
      </div>
      <div className="mx-4 flex h-auto w-auto rounded-md bg-transparent">
        {slot2}
      </div>
      <div className="mx-4 mb-2 flex h-full min-h-0 w-auto rounded-md bg-transparent">
        {slot3}
      </div>
    </div>
  );
}
